概要
前回、社内でよく使用するフレームワークやツールを紹介しました。
今回は、クロスブラウザ、クロスプラットフォームのWebのUI自動テストツールであるSeleniumをご紹介します。
実はSelenium Builderはfirefox 55以降から動作しなくなりましたが、その対策も記載します。
抱えていた課題
- WebアプリのUI操作を自動化してテスト工数を削減したい
- テスト自動化を簡単に始めたい
Seleniumとは?
Seleniumの分類
Seleniumと一言に言っても、歴史は古く色々なプロジェクトが存在し、現在も進んでいます。
以下に大まかな分類図を載せます。
ここではテスト自動化を簡単に始めたい、及び色々なブラウザを実行対象としたいという目的から、
入力操作が容易なSelenium Builder & Web Driverを採用しました。
Selenium Builder & Web Driver
Selenium Builder
- firefoxのアドオン
- クリックなどのブラウザ操作を記録し再生する
Selenium WebDriver
- ブラウザごとに1つずつある
- ブラウザに動作を実行させるためのドライバ
Selenium Server
- BuilderとDriverの中継
以上をまとめると
Selenium Builderでブラウザ操作を記録し、
ブラウザごとに用意されたDriverがSelenium Server経由で動作することで各ブラウザを自動操作します。
以下にSelenium Builder & Web Driverの動作の仕組みを図示してみました。
導入手順
事前に準備するもの
Java※
※Selenium ServerがJavaベースで動作します。
1. Firefoxのインストール
Firfox 52 ESR※、あるいはVersion55より以前のFirefox
※2018年5月現在の最新。バージョンが上がってしまった場合は、バージョンを下げましょう。
2. Selenium Builderのインストール
Selenium BuilderのページをFirefoxで開いて、以下の赤枠のボタンをクリックしてください。
Selenium BuilderはFireFoxのアドオンとしてインストールします。
3. Selenium Web Driverのダウンロード
Seleniumのページから以下のリンクを開いて、ブラウザと環境に合わせたドライバをダウンロードします。今回はChromeのドライバを選択しました。
4. Selenium Serverのダウンロード
同じサイトにて、Selenium Standalone Serverの下にあるリンクからSelenium Serverをダウンロードします。
ダウンロードしたDriverとSeverは同じディレクトリに保存しておくことをお勧めします。
操作方法
1. シナリオの作成
FireFoxを起動して右クリックをするとメニューに「Launch Selenium Builder」という項目が追加されています。
「Launch Selenium Builder」を選択するとSelenium Builderが起動します。
起動したSelenium BuilderにあるRecordボタンをクリックすると、ブラウザ操作の記録を開始します。マウスクリックや、テキストエリアへの入力などの操作を記録します。
記録を終了させたい場合は、Stop Recordingボタンをクリックします。
2. Selenium Serverの起動
コマンドプロンプトでSelenium Serverの起動を行います。引数にはWeb Driverの指定が必要となります。
3. UIテストの実行
Selenium Builderを起動し、Run>Run on Selenium Serverを選択すると、Selenium Serverの起動設定画面が起動します。
Chromeでテスト実行する場合は、Browser Stringに「chrome」と入力してRunボタンをクリックすると自動テストが実行されます。
テストを実行するとブラウザが起動し、シナリオが自動実行されるので、結果を背景の色から目視で確認します。
それぞれの背景色の意味は以下の通りです。
白：未実行、黄：実行中、緑：正常終了、赤：異常終了
まとめ
Selenium Builderの基本的な導入方法と操作方法を紹介しましたが、
Selenium Builderの強みは他にもあります。
例えばシナリオをjsonだけでなく、Javaなどのプログラム言語で表現することができます。
コードに慣れ親しんでいない人が簡単に操作できるだけでなく、
コードが読める開発者であれば、シナリオをコードで表現し、実行することも可能となります。
Selenium Builderのシナリオエクスポート機能は機会があれば紹介していきます。
- CLIでAmazon S3にあるファイル内の文字列検索をしてみる - 2024-02-01
- 不完全なマルチパートアップロードをCLIで確認してS3の無駄コストを無くそう - 2024-01-29
- AlmaLinux9.3にPHP8.3を入れてLaravel9から10にバージョンアップする - 2024-01-12
- AWS CloudShellの表現力を確認してみよう - 2024-01-01
- AWSのアーキテクチャーを学べるAWS Card Clash攻略Wiki - 2023-12-26
【採用情報】一緒に働く仲間を募集しています
